<template>
	<view class="retrievepass">
		<u-navbar :back-icon-size="50" :custom-back="goback"></u-navbar>
		<view class="welcome">
			<view class="weltop"><text>找回密码</text></view>
			<view class="welbot"><text>为了保证您的账户安全，1天只能操作1次，否则账户 \n 将会被锁定无法登录</text></view>
		</view>
		<view class="retrievepass_ipt">
			<u-form :model="form" ref="uForm" :border-bottom="false" :label-width="0">
				<u-form-item prop="phone" :border-bottom="false">
					<view class="smsbtn u-flex u-col-center">
						<u-button :hair-line="false" :custom-style="btnsty" @click="actionshow = true">
							<view class="actiontext">
								<text>{{ action }}</text>
								<u-icon :custom-style="{ margin: '0 10rpx' }" size="22" name="arrow-down-fill"></u-icon>
							</view>
						</u-button>
						<u-input
							class="u-flex-1"
							placeholder="请输入手机号码"
							:height="height"
							:trim="trim"
							:clearable="clearable"
							:cursor-spacing="100"
							:password-icon="false"
							:custom-style="iptsty"
							v-model="form.phone"
							type="number"
							:border="border"
						/>
					</view>
					<u-action-sheet :list="actionlist" v-model="actionshow" @click="sheetclick"></u-action-sheet>
				</u-form-item>
				<u-form-item prop="sms" :border-bottom="false">
					<view class="sms u-flex u-col-center">
						<u-input
							placeholder="验证码"
							:height="height"
							:trim="trim"
							:clearable="clearable"
							:cursor-spacing="0"
							:password-icon="false"
							:custom-style="{
								backgroundColor: '#F8F8F8'
							}"
							v-model="form.sms"
							type="text"
							:border="border"
						/>
						<u-image style="margin-left:16rpx" @click="getValidateCode" width="372rpx" height="90rpx" :src="smsimg"></u-image>
					</view>
				</u-form-item>
			</u-form>
			<u-toast ref="uToast"></u-toast>
			<u-button
				class="u-m-t-30"
				size="default"
				:ripple="true"
				:hair-line="false"
				:disabled="disabled"
				:custom-style="{
					color: '#333333',
					backgroundColor: disabled == true ? '#DFDFDF' : '#FFDB28',
					border: 'none'
				}"
				@click="gonext"
			>
				下一步
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'retrievepass',
	data() {
		return {
			disabled: true,
			action: '+86',
			btnsty: {
				backgroundColor: '#F8F8F8',
				border: 'none',
				height: '90rpx'
			},
			actionlist: [
				{
					text: '+86',
					color: 'blue',
					fontSize: 28
				}
				// {
				// 	text: '+87',
				// 	color: 'blue',
				// 	fontSize: 28
				// }
			],
			actionshow: false,
			smsimg: '',
			clearable: false,
			trim: true,
			border: false,
			height: 90,
			iptsty: {
				backgroundColor: '#F8F8F8'
				// marginBottom: '28rpx'
			},
			form: {
				phone: '',
				sms: '',
				codeid: ''
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '请输入正确格式的手机号码',
						trigger: ['blur']
					}
				],
				sms: [
					{
						required: true,
						message: '请输入图形验证码',
						trigger: ['blur']
					},
					{
						min: 5,
						max: 5,
						message: '请输入5位的图形验证码',
						trigger: ['blur']
					},
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
						trigger: ['blur']
					}
				]
			}
		};
	},
	watch: {
		'form.phone': function(val) {
			// console.log(this.form.phone);
			if (val.length == 11) {
				if (this.form.sms.length == 5) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.sms': function(val) {
			// console.log(this.form.phonesms);
			if (val.length == 5) {
				if (this.form.phone.length == 11) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		}
	},
	//实例创建完成后被立即调用
	created() {},
	//实例初始化之后被调用
	beforeCreate() {},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {
		this.getValidateCode();
		this.$refs.uForm.setRules(this.rules);
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		// 获取图形验证码
		getValidateCode() {
			this.$u.api.getValidateCode().then(res => {
				// console.log(res)
				if (res.data) {
					this.smsimg = res.data.pic.replace(/[\r\n]/g, '');
					this.form.codeid = res.data.key;
				} else {
					this.$u.toast('请求出现错误!');
				}
			});
		},
		sheetclick(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
		},
		goback: function() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		gonext: function() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$u.api
						.getSmsCode({
							phone: this.form.phone,
							code_id: this.form.codeid,
							code: this.form.sms
						})
						.then(res => {
							console.log(res);
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/login/authcode?phone=' + this.form.phone + '&codeid=' + this.form.codeid + '&sms=' + this.form.sms,
								animationType: 'pop-in',
								animationDuration: 200
							});
						});
				} else {
					this.$refs.uToast.show({
						title: '请检查填写是否有误',
						type: 'warning'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.retrievepass {
	.welcome {
		color: rgba(16, 16, 16, 1);
		font-size: 52rpx;
		text-align: left;
		padding-top: 76rpx;
		padding-left: 56rpx;
		padding-bottom: 90rpx;
		font-weight: bolder;
		.welbot {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999999;
			font-weight: 300;
		}
	}
	.retrievepass_ipt::v-deep {
		width: 640rpx;
		margin: 0 auto;
		.uni-input-placeholder {
			left: 36rpx;
		}
		.uni-input-input {
			text-indent: 35rpx;
		}
		/* #ifdef MP */
		.u-input .u-input__input {
			display: block;
			padding-left: 36rpx !important;
		}
		/* #endif */
		.smsbtn{
			.uni-input-placeholder {
				left: 0rpx;
			}
			.uni-input-input {
				text-indent: 0rpx;
			}
			/* #ifdef MP */
			.u-input .u-input__input {
				display: block;
				padding-left: 0rpx !important;
			}
			/* #endif */
		}
	}
	.u-form-item {
		padding: 0;
		overflow: hidden;
		padding-bottom: 25rpx;
	}
	.u-form-item__message {
		padding-left: 36rpx !important;
	}
	.u-form-item--left {
		display: none;
	}
	.smsbtn {
		width: 640rpx;
		overflow: hidden;
		.u-btn {
			padding: 0 20rpx;
		}
		.uni-input-placeholder {
			left: 0rpx;
		}
		/deep/.uni-input-input {
			text-indent: 0rpx !important;
		}
	}

	/* #ifdef MP */
	.u-form-item--left {
		display: none !important;
	}
	.smsbtn {
		/deep/.u-input__input {
			display: block;
			padding-left: 0rpx !important;
		}
		.u-flex-1 {
			margin-right: 8rpx;
		}
	}
	/* #endif */
	.actiontext {
		display: inline-block;
		height: 40rpx;
		line-height: 40rpx;
		padding-right: 20rpx;
		border-right-width: 1px;
		border-right-color: #bbbbbb;
		border-right-style: solid;
	}
}
</style>
